<template>
  <div id="bill">
    <div class="msg">请通过对公打款的方式支付账单应付金额，我们将在<span>3个工作日</span>内完成对出租方的汇款。</div>
    <div class="bill_list">

      <div class="blue-line"></div>

      <div class="bill-items">
        <div class="detail bill-item block" style="margin-top: 0px; border-radius: 0px 0px 10px 10px;">
          <div class="flex space-between" style="align-items: center;"><h3>汇款账号信息</h3><div class="base_btn copy-btn cardNumber" data-clipboard-action="copy"  :data-clipboard-text="payInfo.bankAccount" @click="copyToClipboard"  >复制</div></div>
          <p class="flex space-between"><span>开户行</span><span>{{payInfo.openBank}}</span></p>
          <p class="flex space-between"><span>开户名称</span><span>{{payInfo.openName}}</span></p>
          <p class="flex space-between"><span>账号</span><span id="cardNumber">{{payInfo.bankAccount}}</span></p>

          <div class="dashed-line" style=""></div>

          <div class="bill-info">
            <h3 style="text-align: center;">账单详情</h3>
            <p class="flex space-between"><span>创建时间</span><span>{{orderInfo.orderTime | getFormateDate}}</span></p>
            <p class="flex space-between"><span>账单状态</span><span v-show="orderInfo.orderPayStatus!='02'">待支付</span></p>
            <p class="flex space-between"><span>商户名称</span><span>{{orderInfo.merchantName}}</span></p>
            <p class="flex space-between"><span>账单周期</span><span v-if="orderInfo.leaseStartDate">{{orderInfo.leaseStartDate | getFormateDate('y.m.d')}}至{{orderInfo.leaseEndDate | getFormateDate('y.m.d')}}</span><span v-else>{{orderInfo.cycle | convertWord}}</span></p>
            <p class="flex space-between"><span>月租</span><span>{{orderInfo.monthAmount}}元</span></p>
            <p class="flex space-between"><span>服务费</span><span>{{orderInfo.serviceFee}}元</span></p>
            <p class="flex space-between"><span style="font-size: 14px; color:#333;">应付金额（共计）</span><span style="color: #FF7F5D; font-size: 16px;font-weight: bold;">{{orderInfo.leaseFee+orderInfo.serviceFee}}元</span></p>
          </div>

          <div style="clear: both;"></div>
        </div>



      </div>
    </div>
    <!--<mnav cur="3"></mnav>-->
  </div>
</template>

<script>
  export default {
    name: 'company-bill',
    data () {
      return {
        orderId: '',
        orderInfo: {},
        payInfo:{}
      }
    },
    created () {
      this.orderId = this.$route.query.id?this.$route.query.id.toString():'';
      this.getPayInfo();
      this.getOrderInfo();
    },
    mounted(){

    },
    methods: {
      //汇款信息
      getPayInfo(){
        this.$http.post('yxc/order/getPayInfo',{}).then(res=>{
          if(res.code == 200) {
            this.payInfo = res.data;
          }
        })
      },
      //获取订单信息
      getOrderInfo() {
        this.$http.post('yxc/order/orderInfo',{
          id: this.orderId
        }).then(res=>{
          if(res.code == 200) {
            this.orderInfo = res.data;
          }
        });
      },
      copyToClipboard() {
        let that = this;
        let clipboard = new this.clipboard(".cardNumber");
        clipboard.on('success', function(e) {
          that.$toast("复制成功");
        });
        clipboard.on('error', function () {
        });
      }
    },
    filters:{
      //转换年季月
      convertWord: function(val) {
        if(val == 'M') return '月';
        if(val == 'Q') return '季';
        if(val == 'Y') return '年';
      }
    }

  }
</script>

<style lang="scss" scoped>
  #bill {
    margin: 0 10px;
    margin-bottom: 80px;
  }

  h3 {
    margin: 0px 0px;
  }

  .msg {
    margin-top: 5px;
    padding: 10px 5px;
    background: rgba(255, 238, 233, 1);
    border-radius: 5px;
    /*text-align: center;*/
    color: #FF5D32;
    margin-bottom: 10px;
    font-size: 12px;
    span {
      color: #333;
      /*text-decoration: underline;*/
      /*border-bottom: 1px solid #333;*/
    }

  }

  .dashed-line{border-bottom:1px dashed #DCDCDC;}

  .submit {
    background: rgba(28, 103, 255, 1);
    border-radius: 5px;
    height: 44px;
    line-height: 44px;
    text-align: center;
    color: #fff;
    margin: 20px 10px;
  }
  .btn-group{
    margin: 0 auto;
    text-align: center;
  .reset_btn{background-color: #fff; border: 1px solid #B5B5B5; color:#999; height: 44px; line-height: 44px; margin-right: 15px; padding: 0 40px;}
  .sure_btn{background: rgba(28, 103, 255, 1); color: #fff; padding: 0px 50px; height: 44px; line-height: 44px;}
  .defult_btn{background-color: #E5E5E5;}
  }

  .flex {
    display: flex;
  }

  .space-around {
    justify-content: space-around;
  }
  .align-center{
    align-items: center;
  }

  .space-between {
    justify-content: space-between;
  }
  .blue-line{background-color: #1C67FF; height: 6px; border-radius:4px 4px 0px 0px;}
  .block {
    margin: 10px auto;
    border-radius: 10px;
    background-color: #fff;
    padding: 15px 15px;

  .infos {
    font-size: 14px;
    color: #333;
  }

  }

  .base_btn{display: inline-block; padding: 0px 20px;border-radius: 5px; height: 32px; line-height: 32px;text-align: center;}
  .detail{
    font-size:13px;
    .copy-btn{background-color:#FF9600; border-radius:5px; color: #fff; font-weight: normal; float: right;}
    .gray-btn{border:1px solid rgba(160,160,160,1);border-radius:5px; color: #333333; font-weight: bold; float:right;}
  }
  .detail p{color: #333333;}
  .detail p span:first-child{color: #999999;}
  .detail p{
    .is-wait{color:#FF5D32; font-weight: bold;}
    .is-over{color:#999; font-weight: bold;}
  }

  .bill-item{
  }
  .edit-icon{
    position: absolute;
    right: 0px;
    top: calc(50% - 10px);
    width: 20px;
    height: 20px;
  img{width: 100%;}
  }
  .bill-info{
    margin-top: 15px;
  }
  .bill-input{
    font-size: 14px;
    border-bottom: 1px solid #F5F5F5;
    padding-bottom: 5px;
    span:before{content: '*';color: #FF7F5D;margin-right: 5px; width: 100px;}
    input{height: 35px; font-size: 14px; border: none; outline: none; flex: 1;}
    input::-webkit-input-placeholder{color:#C8CDD3;}
  }
</style>
<style>
  .el-step__icon-inner {
    font-weight: normal;
  }


</style>
